<template>
  <div style="height: 100%">
    <!--标题栏-->
    <div class="map_title_box" style="height: 6%">
      <div class="map_title_innerBox">
        <div class="map_title">实时地图</div>
      </div>
    </div>
    <div class="map" id="map"></div>
    <!--    &lt;!&ndash;地图显示信息选择&ndash;&gt;-->
    <!--    <div class="display_type_box display_box" style="display: none;overflow:auto">-->
    <!--      <div class="display_type_center_box">-->
    <!--        <ul class="display_type_inner_box" id="layerList">-->
    <!--          <li class="display_type_msg"><input id="zt_4" type="checkbox" class="display_type_chose"/> 建管办驻地</li>-->
    <!--          <li class="display_type_msg"><input  id="zt_1" type="checkbox" class="display_type_chose"/>监理单位驻地</li>-->
    <!--          <li class="display_type_msg"><input  id="zt_5" type="checkbox" class="display_type_chose"/>施工单位驻地</li>-->
    <!--          <li class="display_type_msg"><input  id="zt_6" type="checkbox" class="display_type_chose"/>医疗卫生</li>-->
    <!--          <li class="display_type_msg"><input  id="zt_2" type="checkbox" class="display_type_chose"/>加油站</li>-->
    <!--          <li class="display_type_msg"><input  id="zt_0" type="checkbox" class="display_type_chose"/>停车场</li>-->
    <!--          <li class="display_type_msg"><input  id="zt_3" type="checkbox" class="display_type_chose"/>派出所</li>-->
    <!--          <li class="display_type_msg"><input  id="zt_7" type="checkbox" class="display_type_chose"/>应急避难场所</li>-->
    <!--          <li class="display_type_msg">&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</li>-->
    <!--          <li class="display_type_msg"><input id="zt_14" type="checkbox" class="display_type_chose" />危化品运输车辆</li>-->
    <!--          <li class="display_type_msg"><input id="zt_11" type="checkbox" class="display_type_chose" />监控设备</li>-->
    <!--          <li class="display_type_msg"><input id="zt_13" type="checkbox" class="display_type_chose" />巡逻警员</li>-->
    <!--          <li class="display_type_msg"><input id="zt_12" type="checkbox" class="display_type_chose" />巡逻警车</li>-->
    <!--        </ul>-->
    <!--      </div>-->
    <!--      <div class="display_type_funct_box">-->
    <!--        <span class="display_type_funct display_type_funct_sure">确定</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--地图工具栏-->
    <div class="map_tool_outbox">
      <span class="map_tool" onclick="">
        <a class="map_tool_inner" title="全图"></a>
      </span>
      <span class="map_tool" onclick="">
        <a class="map_tool_inner" title="放大" style="background-position-x:-36px"></a>
      </span>
      <span class="map_tool" onclick="">
        <a class="map_tool_inner" title="缩小" style="background-position-x:-72px"></a>
      </span>
      <span class="map_tool" onclick="">
        <a class="map_tool_inner" title="倒退视图" style="background-position-x:-108px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner" title="前进视图" style="background-position-x:-144px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner display_type_btn" title="专题地图" style="background-position-x:-180px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner city_chose_btn" title="城市定位" style="background-position-x:-432px"></a>
      </span>
      <span class="map_tool" id="btnBuffer">
        <a class="map_tool_inner" title="缓冲区分析" style="background-position-x:-216px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner addition_check_btn check_btn" title="地址检索" style="background-position-x:-252px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner chemistry_check_btn check_btn" onclick="" title="危化品检索" style="background-position-x:-288px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner enterprise_check_btn check_btn" onclick="" title="企业检索" style="background-position-x:-324px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner car_check_btn check_btn" onclick="" title="车辆检索"style="background-position-x:-360px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner" onclick="" title="搜索" style="background-position-x:-468px"></a>
      </span>
      <span class="map_tool">
        <a class="map_tool_inner" onclick="" id="fresh_tool" title="清空" style="background-position-x:-396px"></a>
      </span>
      <span class="map_tool">
        <input type="text" id="txtCoord" style="width:150px;visibility:hidden"/>
      </span>
    </div>
  </div>
</template>

<script>

  import AMapLoader from "@amap/amap-jsapi-loader";

  export default {
    name: "emap",
    data() {
      return {
        // 百度地图实例
        map:null
      }
    },
    created() {
      console.log("emap");
      // this.initMap();
      const _this = this;
      this.initAMap(_this);
    },
    methods: {
      initMap() {
        this.map = null;
        const self = this;
        // 创建地图实例
        self.map = new BMap.Map("map");
        self.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        self.map.addControl(new BMap.MapTypeControl({
          mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
          ]}));
        let mapStyle={
          style:"dark"
        };
        self.map.setMapStyle(mapStyle);
        self.map.setCurrentCity("北京");
        self.map.enableScrollWheelZoom(true);
        // let map = new BMap.Map("map");
        // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        // //添加地图类型控件
        // map.addControl(new BMap.MapTypeControl({
        //   mapTypes:[
        //     BMAP_NORMAL_MAP,
        //     BMAP_HYBRID_MAP
        //   ]}));
        // var mapStyle={
        //   style:"dark"
        // };
        // map.setMapStyle(mapStyle);
        // map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        // map.enableScrollWheelZoom(true);
      },
      initAMap(_this) {
        AMapLoader.load({
          // 申请好的Web端开发者Key，首次调用 load 时必填
          key: "b2552a29e43be339e640a19479b89800",
          // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          version: "2.0",
          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          // plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'],
        }).then((AMap) => {
          _this.map = new AMap.Map("map", {
            //设置地图的显示样式
            mapStyle: 'amap://styles/dark',
            // 是否为3D地图模式
            viewMode: "3D",
            // 初始化地图级别
            zoom: 11,
            // 初始化地图中心点位置
            center: [105.605592,38.825372],
          });
          //添加地图类型切换插件
          _this.map.plugin(['AMap.MapType','AMap.Scale'], function () {
            //地图类型切换
            let type= new AMap.MapType({
              defaultType: 0,
              visible: false,
              showRoad: true
            });
            _this.map.addControl(type);
          });

        });
      }
    }
  }

</script>

<style lang="scss" scoped>

  @import "~@/assets/screen/screen2/scss/common.scss";

  .map{
    width: 100%;
    height: 95%;
    background-repeat: no-repeat;
    background-position-x:-300px;
    background-position-y:-200px;
    border-radius: 0px 0px 8px 8px;
    position: relative;
    overflow: hidden;
    cursor:move;
  }

  .display_box {
    width: 20%;
    height: 80%;
    border: rgba(1, 57, 144, 0.9) 2px solid;
    background-color: rgba(11, 39, 63, 0.9);
    position: absolute;
    top: 6%;
    right: 0%;
  }

  .display_type_center_box {
    width: 100%;
    height: 94%;
    overflow: scroll;
  }

  .display_type_msg {
    color: white;
    font-size: 12px;
    margin-bottom: 3px;
  }

  .map_tool_outbox {
    width: 100%;
    background-image: url("~@/assets/screen/screen2/img/map_tool_bg.png");
    height: 50px;
    cursor: auto;
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0px;
    border-radius: 0px 0px 5px 5px;
  }
  .map_tool{
    display: block;
    width: 40px;
    height: 100%;
    margin-left: 8px;
    cursor: pointer;
    float: left;
  }
  .map_tool:hover{
    background-image: url("~@/assets/screen/screen2/img/map_tool_re.png");
    background-repeat: repeat-x;
  }
  .map_tool_inner{
    display: block;
    width: 36px; height: 100%;
    background-image: url("~@/assets/screen/screen2/img/tool.png");
    background-repeat: no-repeat;
    margin-left: 2px;
    background-position-y: 7px;
  }
  ::v-deep .amap-logo {
    display: none !important;
  }
  ::v-deep .amap-copyright {
    display: none !important;
  }
  ::v-deep .BMap_cpyCtrl {
    display: none;
  }
  ::v-deep .anchorBL {
    display: none !important;
  }
</style>
